<template>
  <basic-container>
    <el-container>
      <el-aside width="20%">
        <el-scrollbar style="height: 700px">
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick">
          </avue-tree>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-main>
          <avue-tabs :option="tabOption" @change="tabChange" style="padding-left: 20px;"></avue-tabs>
          <span v-if="type.prop==='setup'">
            <avue-form ref="form" v-model="setUpData" :option="setUpOption" @submit="submitSetUp">
              <template slot-scope="scope" slot="menuForm">
                  <el-button v-if="delsetUpPermission" icon="el-icon-delete" @click="deleteSetUp">删除</el-button>
              </template>
            </avue-form>
          </span>
          <span v-else-if="type.prop==='params'" >
            <avue-crud ref="crud" :option="paramsOption" :data="paramsData" style="width: 95%;">
              <template slot="menuLeft">
                <el-button v-if="saveParamPermission" icon="el-icon-check" type="success" @click="saveParams" size="small">保 存</el-button>
              </template>
              <template slot-scope="{row,index}" slot="menu">
                <el-button icon="el-icon-delete" type="text" size="small" @click="deleteCell(row,index)">删 除</el-button>
              </template>
            </avue-crud>
          </span>
        </el-main>
      </el-container>
    </el-container>

  </basic-container>
</template>

<script>

import { monitors,setup,saveSetup,deleteSetup,param,saveParam } from '@/api/monitor/restful/setting';
import {isShowButton} from "@/api/showButton";
export default {
  data () {
    return {
      delsetUpPermission: false,
      saveParamPermission: false,
      treeOption: {
        title:'接口列表',
        defaultExpandAll: false,
        addBtn: false,
        menu: false,
        props:{
          label:'name',
          value:'name',
          children:'children'
        }
      },
      tabOption: {},
      treeData:[],
      type: {},
      setUpOption: {
        submitBtn: false,
        submitText: '保存',
        emptyBtn: false,
        column: [
          {
            label: '是否监控',
            prop: 'isMonitor',
            type: 'radio',
            border: true,
            dataType: 'number',
            span: 24,
            row: true,
            labelWidth: 160,
            show: false,
            dicUrl: window.urllist.dictUrl + 'YN01',
            props: {
              label: "name",
              value: "code"
            }
          },
          {
            label: 'RESPOSE-STATUS',
            labelWidth: 160,
            prop: 'code',
            type: "input",
            value: 200,
            span: 24,
            row: true,
            placeholder: '请输入respose返回的正确值，多个用英文逗号分割'
          },
          {
            label: 'JS执行代码',
            labelWidth: 160,
            prop: 'execJs',
            type: "textarea",
            dataType: 'number',
            span: 24,
            row: true,
            tip: '例子：return eval(\'(\' + result + \')\').code == 200',
            placeholder: '参数名称为result,返回boolean类型即可，不可写方法体'
          }
        ]
      },
      setUpData: {
        code: 200
      },
      paramsOption: {
        addBtn:false,
        addRowBtn:true,
        cellBtn:false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menuWidth:250,
        column: [
          {
            label:'参数名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: "请输入参数名称",
                trigger: "blur"
              }
            ],
            cell: true
          },
          {
            label:'参数类型',
            prop: 'type',
            type: 'select',
            value: "query",
            clearable: false,
            dicUrl: window.urllist.dictUrl + 'PARAM_TYPE',
            props: {
              label: "name",
              value: "code"
            },
            rules: [
              {
                required: true,
                message: "请选择参数类型",
                trigger: "blur"
              }
            ],
            cell: true
          },
          {
            label:'参数值',
            prop: 'value',
            cell: true
          }
        ]
      },
      paramsData: [],
      treeName: {}
    }
  },
  created () {
    this.getPermission();
    monitors().then((res) => {
      this.treeData = res.data.data;
    })
  },
  methods: {
    getPermission(){
      isShowButton(this.$route.meta.id,'MONITOR_SAVE_SETUP').then(res => {
        this.setUpOption.submitBtn = res
      });

      isShowButton(this.$route.meta.id,'MONITOR_DELETE_SETUP').then(res => {
        this.delsetUpPermission = res
      });

      isShowButton(this.$route.meta.id,'MONITOR_SAVE_PARAMS').then(res => {
        this.saveParamPermission = res
      });
    },

    tabChange(column){
      this.type = column
    },
    findParent(node){
      const tree = {
        method:'',
        path:'',
        tag:'',
        server:'',
      };
      switch (node.level) {
        case 4:
          tree.method = node.data.name;
          node = node.parent;
          /* falls through */
        case 3:
          tree.path = node.data.name;
          node = node.parent;
          /* falls through */
        case 2:
          tree.tag = node.data.name;
          node = node.parent;
          /* falls through */
        case 1:
          tree.server = node.data.name;
      }

      this.treeName = tree;
    },
    nodeClick(data,node){
      this.findParent(node);
      if (node.isLeaf && node.level === 4){
        this.tabOption = {
          type: "card",
          column:[
            {
              label: '监控设置',
              prop: 'setup'
            },
            {
              label: '参数设置',
              prop: 'params'
            }
          ]
        }

        if (this.findObject(this.setUpOption.column,"isMonitor") === -1){
          this.setUpOption.column.splice(0,0,{
            label: '是否监控',
            prop: 'isMonitor',
            type: 'radio',
            border: true,
            dataType: 'number',
            span: 24,
            row: true,
            labelWidth: 160,
            show: false,
            dicUrl: window.urllist.dictUrl + 'YN01',
            props: {
              label: "name",
              value: "code"
            }
          });
        }

        param({
          server: node.parent.parent.parent.data.name,
          path: node.parent.data.name,
          method: data.name
        }).then(res => {
          this.paramsData = res.data.data.map(item => {
            return {...item, cell: true, $cellEdit: true}
          });
        });

      }else {
        this.tabOption = {
          type: "card",
          column:[
            {
              label: '监控设置',
              prop: 'setup'
            }
          ]
        }

        if (node.level === 1){
          if (this.findObject(this.setUpOption.column,"isMonitor") !== -1){
            this.setUpOption.column.splice(0,1);
          }
        }else {
          if (this.findObject(this.setUpOption.column,"isMonitor") === -1){
            this.setUpOption.column.splice(0,0,{
              label: '是否监控',
              prop: 'isMonitor',
              type: 'radio',
              border: true,
              dataType: 'number',
              span: 24,
              row: true,
              labelWidth: 160,
              show: false,
              dicUrl: window.urllist.dictUrl + 'YN01',
              props: {
                label: "name",
                value: "code"
              }
            });
          }
        }
      }

      setup(this.treeName).then(res=>{
        if (res.data.data){
          this.setUpData = {
            isMonitor:res.data.data.isMonitor,
            code:res.data.data.code,
            execJs:res.data.data.execJs,
            id: res.data.data.id
          };
        }else {
          this.setUpData = {
            isMonitor:'',
            code:200,
            execJs: '',
            id: ''
          };
        }
      });

      this.type = this.tabOption.column[0];
    },
    submitSetUp(form,done){
      saveSetup({
        ...form,
        ...this.treeName
      }).then(res=>{
        if (res.data.status){
          this.setUpData = {
            isMonitor:res.data.data.isMonitor,
            code:res.data.data.code,
            execJs:res.data.data.execJs,
            id: res.data.data.id
          };
          this.$message.success("保存成功");
        }else {
          this.$message.error(res.data.message);
        }
        done();
      }).catch(()=>{
        done();
      });
    },
    deleteSetUp(){
      if (!this.validatenull(this.setUpData.id)){
        deleteSetup(this.setUpData.id).then(res=>{
          if (res.data.status){
            this.$message.success("删除成功");
          }else {
            this.$message.error(res.data.message);
          }
        })
      }else {
        this.$refs.form.resetForm();
        this.$message.success("删除成功");
      }
    },
    deleteCell(row,index){
      this.paramsData.splice(index,1);
    },
    saveParams(){
      this.$refs.crud.validateCellForm().then((msg)=>{
        if (this.validatenull(msg) || Object.keys(msg).length === 0){
          saveParam(this.treeName.server,this.treeName.path,this.treeName.method,this.paramsData).then(res=>{
            if (res.data.status){
              this.$message.success("保存成功");
            }else {
              this.$message.error(res.data.message);
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>